<template>
	<view class="container">
		<view class="header">
			<view class="header_search">
				<view class="header_search_input">
					<image class="header_search_input_icon" :src="iconUrl + '71.png'" mode=""></image>
					<input type="text" v-model="searchFnc.searchText" maxlength="20" placeholder="搜索订单号/商品标题/姓名/手机号"
						placeholder-style="color:#CACCCC" />
					<image v-if="searchFnc.searchText" @tap="searchFnc.close" class="header_search_input_close"
						:src="iconUrl + '08.png'" mode=""></image>
				</view>
				<view class="header_search_btn" @tap="searchFnc.search">搜索</view>
			</view>
		</view>
		<view class="content">
			<view class="goods_list">
				<goodsList ref="goodsListRef" v-if="searchFnc.listData && searchFnc.listData.length> 0"
					:dataList="searchFnc.listData"></goodsList>
				<uni-load-more v-if="searchFnc.listData && searchFnc.listData.length > 0" iconType="auto"
					:status="searchFnc.loading" />
			</view>
			<view class="blank_box" v-if="searchFnc.isBlank">
				很抱歉，没有找到关于“<text>{{searchFnc.blankText}}</text>”的结果。
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import api from '@/api'
	import { reactive, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import goodsList from '@/pages/shopping/components/goodsList.vue'
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const goodsListRef = ref()
	onLoad(async (options) => {

	})
	onShow(() => {

	})
	const searchFnc = reactive({
		isCloseIcon: false,
		searchText: '',
		search: async () => {
			onDataInit()
			scrollToTop()
			searchFnc.getOrderList()
		},
		close: async () => {
			searchFnc.searchText = ''
		},
		page: 1,
		limit: 20,
		loading: 'more',
		listData: [],
		hotGoodsList: [],
		isBlank: false,
		blankText: '',
		/* 订单数据 */
		getOrderList: async () => {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			searchFnc.loading = 'loading'
			const { data: { total = 0, records = [] } } : any = await api({
				method: 'get',
				url: `/mall/shopping/order/newPage`,
				data: {
					page: searchFnc.page,
					limit: searchFnc.limit,
					buyType: 1,
					status: -1,
					q: searchFnc.searchText
				}
			})
			if (records) {
				for (let i = 0; i < records.length; i++) {
					records[i].allCount = 0;
				}
				records.forEach(item => {
					item.orderGoods.forEach(itemList => {
						if (itemList.spotDeliveryTypeMsg.substr(0, 1) == 0) {
							itemList.spotMsg = itemList.spotDeliveryTypeMsg.substr(1, itemList.spotDeliveryTypeMsg.length);
							itemList.spotMsg = `${itemList.spotMsg ? itemList.spotMsg.split(",")[0].split(":")[0] : 15}点前下单当天发货，${itemList.spotMsg ? itemList.spotMsg.split(",")[0].split(":")[0] : 15}
							点后的订单次日发货${itemList.spotMsg && itemList.spotMsg.split(",")[1] == 1 ?
									'周末及法定节假日顺延' : ''}`;
						} else {
							itemList.spotMsg = itemList.spotDeliveryTypeMsg.substr(1, itemList.spotDeliveryTypeMsg.length);
							//itemList.spotMsg=itemList.spotDeliveryTypeMsg;

						}
					})
					item.orderGoods.forEach(val => {
						item.allCount += val.count
					})
				})
				searchFnc.listData = searchFnc.page == 1 ? records : searchFnc.listData.concat(records)
				if (!records.length || searchFnc.listData.length >= total) {
					searchFnc.loading = 'noMore'
				} else {
					searchFnc.loading = 'more'
				}
				searchFnc.isBlank = searchFnc.listData.length < 1 ? true : false
				searchFnc.blankText = searchFnc.searchText
			} else {
				searchFnc.loading = 'more'
				//searchFnc.isBlank = true
			}
			uni.hideLoading()
		}
	})
	const scrollToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
	const onDataInit = async () => {
		searchFnc.page = 1
		searchFnc.listData = []
	}
	// 页面下拉刷新
	onPullDownRefresh(async () => {
		if (searchFnc.loading == 'loading') {
			uni.stopPullDownRefresh()
		} else {
			try {
				await onDataInit()
				await searchFnc.getOrderList()
			} catch (error) {
			}
			uni.stopPullDownRefresh()
		}
	})
	// 触底
	onReachBottom(async () => {
		if (searchFnc.loading == 'noMore') return false
		searchFnc.page++
		await searchFnc.getOrderList()
	})
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		min-height: 100vh;
		background-color: #F9F6F6;
		box-sizing: border-box;
	}

	.header {
		padding: 10rpx 32rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 84rpx;
		/* #endif */
		left: 0;
		z-index: 10;
		border-top: 1rpx solid #E4E6E6;

		.header_search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 1;

			.header_search_input {
				width: 604rpx;
				height: 72rpx;
				background-color: #F9F6F6;
				border-radius: 200rpx;
				display: flex;
				align-items: center;

				//box-sizing: border-box;
				.header_search_input_icon {
					margin: 0 24rpx;
					width: 40rpx;
					height: 40rpx;
				}

				input {
					width: 460rpx;
					font-size: 30rpx;
					color: #1B2120;
				}

				.header_search_input_close {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.header_search_btn {
				font-size: 30rpx;
				color: #FF6084;
				font-weight: bold;
			}
		}
	}

	.content {
		padding-top: 30rpx;

		.goods_list {
			width: 686rpx;
			margin: 0 auto;
		}

		.blank_box {
			width: 686rpx;
			margin: 0 auto;
			padding-top: 96rpx;
			font-size: 32rpx;
			color: #5C5E5E;
			line-height: 1.4;
			word-break: break-all;

			text {
				color: #1B2120;
				font-weight: bold;
			}
		}
	}
</style>